<template>
	<view class="menu">
		<text data-index="0" @click="tapMainMenu(0)">价格</text>
		<view :class="subMenuDisplay[0]">
			<view>
				<text :class="subMenuHighLight[0][0]" data-index="0-0" @click="tapSubMenu([0, 0])">100以内</text>
				<text :class="subMenuHighLight[0][1]" data-index="0-1" @click="tapSubMenu([0, 1])">100-500</text>
				<text :class="subMenuHighLight[0][2]" data-index="0-2" @click="tapSubMenu([0, 2])">500-1000</text>
				<text :class="subMenuHighLight[0][3]" data-index="0-3" @click="tapSubMenu([0, 3])">1000-3000</text>
				<text :class="subMenuHighLight[0][4]" data-index="0-4" @click="tapSubMenu([0, 4])">3000以上</text>
			</view>
		</view>
		<text data-index="1" @click="tapMainMenu(1)">销量</text>
		<view :class="subMenuDisplay[1]">
			<view>
				<text :class="subMenuHighLight[1][0]" data-index="1-0" @click="tapSubMenu([1, 0])">从多到少</text>
				<text :class="subMenuHighLight[1][1]" data-index="1-1" @click="tapSubMenu([1, 1])">从少到多</text>
			</view>
		</view>
		<text data-index="2" @click="tapMainMenu(2)">上架时间</text>
		<view :class="subMenuDisplay[2]">
			<view>
				<text :class="subMenuHighLight[2][0]" data-index="2-0" @click="tapSubMenu([2, 0])">从新到旧</text>
				<text :class="subMenuHighLight[2][1]" data-index="2-1" @click="tapSubMenu([2, 1])">从旧到到</text>
				<text :class="subMenuHighLight[2][2]" data-index="2-2" @click="tapSubMenu([2, 2])">智能排序</text>
			</view>
		</view>
	</view>
	
	<view class="goodsList carts-list">
		<view v-for="(item, index) in goods" :key="index" class="carts-item" :data-object-id="index" >
			<view>
				<!-- 缩略图 -->
				<image class="carts-image" @click="tapGoods" :src="item.avatar" mode="aspectFill" />
			</view>
			<view class="carts-text">
				<!-- 商品标题 -->
				<text class="carts-title" @click="tapGoods">{{item.title}}</text>
				<view class="carts-subtitle">
					<!-- 价格 -->
					<text class="carts-price">￥{{item.price}}元</text>
					<image class="cart-icon" src="/static/images/mall/icon_cart.png" @click.stop="addCart" mode="widthFix" :data-object-id="index" />
				</view>
				<!-- 销量与评价 -->
				<view class="goods-score">
					<text>已售99件</text>
					<text>好评率 99%</text>
				</view>
			</view>
		</view>
	</view>
	
	<view class="loading-indicator">
		{{loadingTip}}
	</view>
</template>

<script>
	let initSubMenuHighLight = [
		['','','','',''],
		['',''],
		['','','']
	];
	
	import { ref } from "vue"; // 引入响应式函数ref
	export default {
		setup() { //为一个函数	
			let subMenuDisplay = ref(['hidden', 'hidden', 'hidden']);
			let subMenuHighLight = ref(initSubMenuHighLight);
			let goods = ref([
				{avatar: '/static/images/mall/img3.png', price: 9999, title: '华为mate70首发纯血鸿蒙！系统内存效率有了巨大提升，流畅度比安卓还要快三倍'},
				{avatar: '/static/images/mall/img3.png', price: 9999, title: '华为mate70首发纯血鸿蒙！系统内存效率有了巨大提升，流畅度比安卓还要快三倍'},
				{avatar: '/static/images/mall/img3.png', price: 9999, title: '华为mate70首发纯血鸿蒙！系统内存效率有了巨大提升，流畅度比安卓还要快三倍'},
				{avatar: '/static/images/mall/img3.png', price: 9999, title: '华为mate70首发纯血鸿蒙！系统内存效率有了巨大提升，流畅度比安卓还要快三倍'},
				{avatar: '/static/images/mall/img3.png', price: 9999, title: '华为mate70首发纯血鸿蒙！系统内存效率有了巨大提升，流畅度比安卓还要快三倍'},
			]);
			let loadingTip = ref('上拉加载更多');
			
			const tapMainMenu = (index) => {
				// 生成数组，全为hidden的，只对当前的进行显示
				var newSubMenuDisplay = ['hidden', 'hidden', 'hidden'];
				// 如果目前是显示则隐藏，反之亦反之。同时要隐藏其他的菜单
				if(subMenuDisplay.value[index] == 'hidden') {
					newSubMenuDisplay[index] = 'show';
				} else {
					newSubMenuDisplay[index] = 'hidden';
				}
				// 设置为新的数组
				subMenuDisplay.value = newSubMenuDisplay;
			}
			
			const tapSubMenu = (indexArray) => {
				// 隐藏所有一级菜单
				subMenuDisplay.value = ['hidden', 'hidden', 'hidden'];
				
				// 初始化状态
				for (var i = 0; i < initSubMenuHighLight.length; i++) {
					// 如果点中的是一级菜单，则先清空状态，即非高亮模式，然后再高亮点中的二级菜单；如果不是当前菜单，而不理会。经过这样处理就能保留其他菜单的高亮状态
					if (indexArray[0] == i) {
						for (var j = 0; j < initSubMenuHighLight[i].length; j++) {
							// 实现清空
							initSubMenuHighLight[i][j] = '';
						}
					}
				}
				
				// 与一级菜单不同，这里不需要判断当前状态，只需要点击就给class赋予highlight即可
				initSubMenuHighLight[indexArray[0]][indexArray[1]] = 'highlight';
				
				subMenuHighLight.value = initSubMenuHighLight;
			}
			
			const tapGoods = () => {
				uni.navigateTo({
					url:"/pages/mall/home/goods/detail/detail"
				});
			}
			
			const addCart = () => {
				uni.showToast({
					title: '已加入购物车',
					icon: 'success',
					duration: 1000
				});
			}
		
			return {
				subMenuDisplay,
				subMenuHighLight,
				goods,
				loadingTip,
				tapMainMenu,
				tapSubMenu,
				tapGoods,
				addCart
			}
		}
	}
</script>

<style>
	/*总菜单容器*/
	.menu {
	 	display: block;
		height: 76rpx;
	}
	
	/*一级菜单*/
	.menu > text {
		font-size:30rpx;
		float: left;
		/*hack*/
		width: 33%;
		height: 76rpx;
		border-right: 1px solid #d2d2d2;
		border-bottom: 1px solid #d2d2d2;
		text-align: center;
		background-color: #f4f4f4;
		color: #5a5a5a;
		line-height: 76rpx;
	}
	
	/*二级菜单外部容器样式*/
	.menu > view{
		position: absolute;
		width: 100%;
		/*hack*/
		top:78rpx;
		left:0;
		z-index:999;
	}
	
	/*二级菜单普通样式*/
	.menu > view > view > text{
		font-size: 28rpx;
		color: #575757;
		display: block;
		background-color: #fff;
		border-bottom: 1px solid #dbdbdb;
		text-align: center;
		padding:20rpx 0;
	}
	
	/*二级菜单高亮样式*/
	.menu > view > view > text.highlight{
		background-color: #f4f4f4;
		color: #48C23D;
	}
	
	/* 显示与隐藏 */
	.show {
		display: block;
	}
	
	.hidden {
		display: none;
	}
	
	/*商品列表*/
	.goodsList {
		/*hack*/
		margin-top:2px;
	/*	border: 2px dashed red;
		height: 400px;
		background-color: orange;
		opacity: 0.5;*/
		z-index:1;
	}
	
	/*销量与好评*/
	.goods-score {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		width: 100%;
	}
	
	.goods-score text {
		display: block;
		width: 200rpx;
		font-size: 12px;
		color: #999;
		margin: 8px 4px;
	}
	
	/*整体列表*/
	.carts-list {
		display: flex;
		flex-direction: column;
		padding: 0 40rpx;
	}
	
	/*每行单元格*/
	.carts-item {
		display: flex;
		flex-direction: row;
		/*width属性解决标题文字太短而缩略图偏移*/
		width:100%;
		border-bottom: 1px solid #eee;
		padding: 0;
		margin-top: 30rpx;
	}
	
	/*左部图片*/
	.carts-image {
		width:150rpx;
		height:150rpx;
	}
	
	
	/*右部描述*/
	.carts-text {
		margin-left: 10rpx;
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	
	/*右上部分标题*/
	.carts-title {
		font-size: 28rpx;
		color: #444;
		line-height: 38rpx;
	}
	
	/*右下部分价格与数量*/
	.carts-subtitle {
		font-size: 25rpx;
		color:darkgray;
		padding: 0 20rpx;
		display: flex;
		flex-direction: row;
		justify-content:space-between;
	}
	
	/*价格*/
	.carts-price {
		color: #f60;
		font-size:14px;
		line-height: 22px;
	}
	
	/*添加购物车按钮*/
	.cart-icon {
		width: 50rpx;
	}
	
	/*上拉加载提示*/
	.loading-indicator {
		text-align: center;
		font-size: 24rpx;
		padding:30rpx;
	}
	
	/*一级菜单高亮的颜色：eeeeee*/
	/*还需要一个三角形，动画旋转，下拉时背景渐渐变暗*/
	/*左边一条灰边，右边还有空缺，是由于33%的缘故*/
</style>